import { computed, defineComponent, onBeforeMount, onMounted, Ref, ref, SetupContext, watch } from 'vue';
import { MemoryVoiceHeaderProps, memoryVoiceHeaderProps } from './header.props';
import './header.scss';
import FSearchBox from '../../../../search-box/src/search-box.component';
import { HeaderNavType } from '../../composition/types';

export default defineComponent({
    name: 'FMemoryVoiceHeader',
    props: memoryVoiceHeaderProps,
    emits: ['change'],
    setup(props: MemoryVoiceHeaderProps, context: SetupContext) {
        const showSearchbox = ref(props.showSearchbox);

        // 处理图标logo
        const validLogo = computed(() => {
            if (!props.logoUrl) {
                return 'assets/memory-voice/logo.png';
            } else {
                return props.logoUrl;
            }
        });

        // 处理选中页签
        const activeMenuItem = ref(HeaderNavType.HomePage);
        const computeMenuItemClass = computed(() => {
            return (flag: string, isLeftMenu = true) => {
                let cls = isLeftMenu ? 'menu-item left' : 'menu-item';

                if (activeMenuItem.value === flag) {
                    return cls + ' menu-active';
                }
                return cls;
            };
        });
        function changeMenu(flag) {
            activeMenuItem.value = flag;

            context.emit('change', flag);
        }

        // 处理搜索
        const searchText = ref('');
        let latestRecommendedData: Ref<any[]> = ref([]);
        function searchTextChanged(newValue: any) {
            if (newValue && newValue.value && !latestRecommendedData.value.find((v) => v === newValue.value)) {
                latestRecommendedData.value.unshift(newValue.value);
            }
        }

        onBeforeMount(() => {
            // 初始搜索框的推荐数据
            const originalRecommandData = latestRecommendedData.value.length > 0 ? latestRecommendedData.value : props.recommendedData;
            latestRecommendedData.value = originalRecommandData;
        });
        onMounted(() => {});
        return () => {
            return (
                <div class="mv-header">
                    <div class="mv-logo">
                        <img src={validLogo.value} />
                    </div>
                    <div class="nav-tab flex-fill">
                        <div class="menu">
                            <div class={computeMenuItemClass.value(HeaderNavType.HomePage)} onClick={() => changeMenu(HeaderNavType.HomePage)}>
                                发现
                            </div>
                            <div class={computeMenuItemClass.value(HeaderNavType.Category)} onClick={() => changeMenu(HeaderNavType.Category)}>
                                分类
                            </div>
                        </div>
                        <div class="menu menu-right">
                            {showSearchbox ? (
                                <div class="menu-search">
                                    <FSearchBox
                                        v-model={searchText.value}
                                        recommendedData={latestRecommendedData}
                                        onClickButton={(value) => searchTextChanged(value)}></FSearchBox>
                                </div>
                            ) : (
                                ''
                            )}
                            <div class="menu">
                                <div class={computeMenuItemClass.value(HeaderNavType.CreateResouce, false)} onClick={() => changeMenu(HeaderNavType.CreateResouce)}>
                                    <img class="mv-add-voice" src='assets/memory-voice/add-voice.png'></img>
                                    资料创作
                                </div>
                                <div
                                    class={computeMenuItemClass.value(HeaderNavType.PersonalCenter, false)}
                                    onClick={() => changeMenu(HeaderNavType.PersonalCenter)}>
                                    <li class="mv-avatar">
                                        <div class="items-center d-flex userimg">
                                            <span class="f-icon f-icon-top_my"></span>
                                        </div>
                                        <span class="ml-2"> </span>
                                    </li>
                                    个人中心
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            );
        };
    }
});
